<template>
    <div class="list-wrap">
        <el-form :model="couponForm" :label-width="labelWidth" class="demo-ruleForm">
            <el-form-item label="获取列表">
                <el-select v-model="activityId" placeholder="请选择活动列表" @change="getPrizeId">
                    <el-option v-for="item in activityArr" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
                <el-select v-if="activityId != '' && prizeArr.length > 0" v-model="activityPrizeId" @change="getCouponCode" placeholder="请选择编号">
                    <el-option v-for="item in prizeArr" :label="item.prizeName" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="width: 90%; margin: 0 auto;">
            <el-table
                    :data="tableData"
                    border
                    align="center"
                    header-align="center"
                    width="100%"
                    style="text-align: center;"
                    tooltip-effect="dark">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名字">
                </el-table-column>
                <el-table-column
                        prop="activityPrizeId"
                        label="活动奖品id">
                </el-table-column>
                <el-table-column
                        prop="code"
                        label="券码">
                </el-table-column>
                <el-table-column
                        prop="secretKey"
                        label="密码">
                </el-table-column>
                <el-table-column
                        prop="couponType"
                        :formatter="typeFormat"
                        label="奖品类型">
                </el-table-column>
                <el-table-column
                        prop="available"
                        :formatter="hideFormat"
                        label="是否有效">
                </el-table-column>
                <el-table-column
                        prop="remarks"
                        label="使用方法">
                </el-table-column>
                <el-table-column
                        width="100"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button class="pan-btn green-btn" @click="delHandle(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import request from '@/utils/request';
    export default {
        name: 'CouponList',
        data () {
            return {
                couponForm: {},
                tableData: [],
                labelWidth: '130px',
                activityArr: [],
                activityId: '',
                prizeArr: [],
                activityPrizeId: ''
            }
        },
        mounted () {
            this.$nextTick(function () {
                this.getActivityArr();
            });
        },
        methods: {
            getActivityArr () {
                const _this = this;
                request.get('/activityConsole/activity/info/findAll', {
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                }).then( res => {
                    console.log(res);
                    _this.activityArr = res;
                }).catch(err => {
                    console.log(err);
                })
            },
            typeFormat (row, column) {
                const type = row[column.property];
                if (type == 'GUOMEI') {
                    return '国美优惠券'
                }
                if (type == 'SHOUQIRUIKA') {
                    return '首汽瑞卡租车券'
                }
                if (type == 'YOUPINWEI_TOURIST_CARD') {
                    return '有品位旅游卡券'
                }
                if (type == 'CHEDIANDIAN_CAR_WASH') {
                    return '车点点洗车券'
                }
            },
            hideFormat (row, column) {
                const type = row[column.property];
                if (type) {
                    return '有效'
                } else {
                    return '无效'
                }
            },
            getPrizeId () {
                console.log(this.activityId);
                const _this = this;
                request.get('/activityConsole/activity/activityInfoId/'+ _this.activityId +'/prize/coupon-code-list', {
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                }).then( res => {
                    _this.prizeArr = res.data;
                    if (_this.prizeArr.length < 1) {
                        _this.tableData = [];
                    } else {
                        if (_this.activityPrizeId) {
                            _this.getCouponCode();
                        }
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            getCouponCode () {
                const _this = this;
                console.log( _this.activityPrizeId);
                request.get('/activityConsole/activity/info/prize/couponCode', {
                    params: {
                        activityPrizeId: _this.activityPrizeId
                    }
                }, {
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                }).then( res => {
                    _this.tableData = res;
                }).catch(err => {
                    console.log(err);
                })
            },
            delHandle (row, index) {
                const _this = this;
                this.$confirm('此操作将永久删除该奖品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'green-btn pan-btn',
                    type: 'warning'
                }).then(() => {
                    request({
                        url: '/activityConsole/activity/info/prize/couponCode/id/'+row.id,
                        method: 'delete'
                    }).then(res => {
                        console.log(res);
                        if (res) {
                            _this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            _this.tableData.splice(index, 1);
                        }
                        else {
                            _this.$message({
                                type: 'error',
                                message: '删除失败'
                            });
                        }
                    }).catch(err => {
                        console.log(err);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>
<style scoped>
    .demo-ruleForm {
        margin: 20px;
    }
    .cell {
        text-align: center;
    }
</style>